<template>
  <div class="main-div">
    <div class="search-div select-none">
      <img class="img-btn" src="../../assets/image/circuit/folderAdd.png"
           @click="addFolderClick" alt="addFolder"/>
      <img class="img-btn" src="../../assets/image/circuit/circuitAdd.png"
           @click="addCircuitClick" alt="addCircuit"/>
      <img class="img-btn" src="../../assets/image/circuit/edit.png"
           @click="editClick" alt="edit"/>
      <img class="img-btn" src="../../assets/image/circuit/delete.png"
           @click="deleteClick" alt="delete"/>
      <img class="img-btn" src="../../assets/image/circuit/refresh.png"
           @click="loadData" alt="refresh"/>
      <img v-if="!copyStatus" class="img-btn" src="../../assets/image/circuit/copy.png"
           @click="copyClick" alt="copy"/>
      <img v-else class="img-btn" src="../../assets/image/circuit/copyTo.png"
           @click="pasteClick" alt="paste"/>
      <div class="file-path">
        <span @click="goFolder()">根目录</span>
        <div v-for="(item,index) in filePath" :key="index" @click="goFolder(item.id,index)">
          <span style="margin: 0 5px">/</span>{{item.name}}
        </div>
      </div>
    </div>
    <div class="content-div select-none">
      <div class="node-line" v-for="(item,index) in fileArr" :key="index">
        <el-checkbox border size="medium" class="file-checkbox" v-model="item.checked"/>
        <div style="display: flex" @click="nodeClick(item,index)">
          <svg-icon class-name="file-class" :icon-class="item.type"/>
          <div class="file-name">{{item.name}}</div>
        </div>
      </div>
    </div>

    <el-drawer
      title="回路信息"
      :visible.sync="drawerVisible"
      size="55%">
      <div class="drawer-content">
        <el-form label-position="left" label-width="90px" size="small" v-model="saveObject">
          <el-form-item label="回路名称:">
            <el-input v-model="saveObject.name"></el-input>
          </el-form-item>
          <el-form-item label="备注信息:">
            <el-input v-model="saveObject.note" type="textarea" :rowspan="3"></el-input>
          </el-form-item>
          <el-form-item label="" style="text-align: right">
            <el-button type="magicGreen" size="mini" @click="openAddNode()">新增端子</el-button>
          </el-form-item>
        </el-form>
        <div></div>
        <el-table
          ref="multipleTable"
          border
          stripe
          :data="saveObject.children"
          tooltip-effect="dark"
          height="600px"
          style="width: 100%">
          <el-table-column
            prop="orderNum"
            label="序号"
            width="70">
          </el-table-column>

          <el-table-column
            prop="name"
            label="端子名称"
            width="100">
          </el-table-column>

          <el-table-column
            prop="screenName"
            label="所属屏类"
            width="100">
          </el-table-column>

          <el-table-column
            prop="equipName"
            label="所属装置"
            width="100">
          </el-table-column>
          <el-table-column
            prop="leftNode"
            label="左链"
            width="100">
          </el-table-column>
          <el-table-column
            prop="rightNode"
            label="右链"
            width="100">
          </el-table-column>
          <el-table-column
            prop="note"
            label="备注">
          </el-table-column>
          <el-table-column
            label="操作">
            <template slot-scope="scope">
              <el-button type="magicGreen" size="mini" @click="openEditNode(scope.row)">修改</el-button>
              <el-button type="danger" size="mini" @click="deleteNode(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div

        class="draw-footer">
        <el-button
          type="danger"
          @click="saveCircuit"
        >保 存
        </el-button>
      </div>
    </el-drawer>
    <div class="hidden-div">
      <el-dialog
        :title="actionNode.saveFlag==='edit'?'修改端子':'新增端子'"
        :visible.sync="dialogVisible"
        :close-on-click-modal="false"
        width="660px"
      >
        <div class="dialog-line"/>
        <div class="dialog-padding">
          <el-form
            label-position="left"
            label-width="90px"
            :model="actionNode"
            size="small">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="端子名称">
                  <el-input type="text" v-model="actionNode.name"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="端子类别">
                  <el-select v-model="actionNode.nodeType" clearable class="select-100">
                    <el-option v-for="(item,index) in nodeTypeArr"
                               :key="index" :label="item.name" :value="item.code"/>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="所属屏类">
                  <el-input type="text" v-model="actionNode.screenName"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="所属装置">
                  <el-input type="text" v-model="actionNode.equipName"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="左链端子">
                  <el-input type="text" v-model="actionNode.leftNode"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="右链端子">
                  <el-input type="text" v-model="actionNode.rightNode"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="扩展备用1">
                  <el-input type="text" v-model="actionNode.extText1"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="扩展备用2">
                  <el-input type="text" v-model="actionNode.extText2"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="扩展备用3">
                  <el-input type="text" v-model="actionNode.extText3"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="扩展备用4">
                  <el-input type="text" v-model="actionNode.extText4"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="扩展备用5">
                  <el-input type="text" v-model="actionNode.extText5"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="端子备注">
                  <el-input type="textarea" v-model="actionNode.note" :rowspan="5"/>
                </el-form-item>
              </el-col>
            </el-row>

          </el-form>
        </div>
        <span
          slot="footer"
          class="dialog-footer">
          <el-button
            type="primary"
            size="mini"
            @click="saveNode"
          >保 存</el-button>
          <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
        </span>

      </el-dialog>
      <el-dialog
        :title="saveObject.saveFlag==='edit'?'修改文件夹':'新增文件夹'"
        :visible.sync="editFolderVisible"
        :close-on-click-modal="false"
        width="660px"
      >
        <div class="dialog-line"/>
        <div class="dialog-padding">
          <el-form
            label-position="left"
            label-width="90px"
            :model="actionNode"
            size="small">
            <el-row :gutter="20">
              <el-col>
                <el-form-item label="文件夹名称">
                  <el-input type="text" v-model="saveObject.name"/>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <span
          slot="footer"
          class="dialog-footer">
          <el-button
            type="primary"
            size="mini"
            @click="saveFolder"
          >保 存</el-button>
          <el-button size="mini" @click="editFolderVisible = false">取 消</el-button>
        </span>

      </el-dialog>
    </div>
  </div>
</template>

<script>

  import {saveFolder, deleteFolder, copyFile, getFileArr} from "@/api/electricity/folder";
  import {addCircuit, deleteCircuit, listCircuitPage, getCircuitInfo, updateCircuit} from '@/api/electricity/circuit'
  import {deleteNode, updateNode} from "@/api/electricity/node";
  import nodeTypeUtils from '@/utils/dict/node-type-dict';

  export default {
    name: 'CircuitFolder',
    data() {
      return {
        fileArr: [],
        folderId: '',
        filePath: [],
        drawerVisible: false,
        saveObject: {},
        editFolderVisible: false,
        actionNode: {},
        dialogVisible: false,
        nodeTypeArr: nodeTypeUtils.nodeTypeArr,
        getNodeObj: nodeTypeUtils.getObj,
        copyStatus: false,
        copyData: []
      }
    },
    mounted() {
      this.loadData();
    },
    methods: {
      async loadData() {
        let tmpParams = {};
        if (this.folderId) {
          tmpParams.id = this.folderId;
        }
        let tmpArr = await getFileArr(tmpParams);
        for (let i = 0; i < tmpArr.length; i++) {
          tmpArr[i].checked = false;
        }
        this.fileArr = tmpArr;
      },
      addFolderClick() {
        this.saveObject = {};
        if (this.folderId) {
          this.saveObject.parentId = this.folderId;
        }
        this.drawerVisible = false;
        this.editFolderVisible = true;
      },
      saveFolder() {
        saveFolder(this.saveObject).then(res => {
          this.$message.success("保存成功");
          this.editFolderVisible = false;
          this.loadData();
        })
      },
      addCircuitClick() {
        this.saveObject = {};
        if (this.folderId) {
          this.saveObject.parentId = this.folderId;
        }
        this.drawerVisible = true;
        this.saveFlag = 'add'
      },
      async editClick() {
        let tmpArr = this.fileArr
        tmpArr = tmpArr.filter(item => {
          return item.checked;
        });
        if (tmpArr.length <= 0) {
          this.$message.warning("请选择一个数据")
          return;
        }
        if (tmpArr.length > 1) {
          this.$message.warning("只可以选择一个数据")
          return;
        }
        this.saveObject = {...tmpArr[0]};
        if (this.saveObject.type === 'folder') {
          this.drawerVisible = false;
          this.editFolderVisible = true;
        } else {
          this.saveObject = await getCircuitInfo(this.saveObject);
          this.drawerVisible = true;
          this.editFolderVisible = false;
        }
      },
      deleteClick() {
        let tmpArr = this.fileArr;
        tmpArr = tmpArr.filter(item => {
          return item.checked;
        });
        if (tmpArr.length <= 0) {
          this.$message.warning("请选择一个数据")
          return;
        }
        if (tmpArr.length > 1) {
          this.$message.warning("只可以选择一个数据")
          return;
        }
        let tmpObj = {...tmpArr[0]};
        // 删除数据
        this.$confirm('确认删除此条数据?', '确认删除', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 确定之后删除
          if (tmpObj.type === 'folder') {
            deleteFolder(tmpObj).then(res => {
              this.$message.success("删除成功");
              this.loadData();
            })
          } else {
            deleteCircuit(tmpObj).then(res => {
              this.$message.success("删除成功");
              this.loadData();
            })
          }
        }).catch(() => {
          console.log('取消删除..');
        });
      },
      copyClick() {
        let tmpArr = this.fileArr;
        tmpArr = tmpArr.filter(item => {
          return item.checked;
        });
        if (tmpArr.length <= 0) {
          this.$message.warning("请选择一个数据")
          return;
        }
        let tmpIdArr = tmpArr.map(item => {
          return {id: item.id, type: item.type};
        });
        this.copyStatus = true;
        this.copyData = tmpIdArr;
      },
      pasteClick() {
        if (!this.copyStatus || this.copyData.length <= 0) {
          this.$message.warning("需要选择数据");
          return;
        }
        let tmpData = {};
        console.log('this.copyData:', this.copyData)
        tmpData.dataArr = this.copyData;
        tmpData.targetId = this.folderId;
        copyFile(tmpData).then(res => {
          this.copyStatus = false;
          this.loadData();
        });
      },
      nodeClick(row, index) {
        if (row.type === 'folder') {
          this.filePath.push(row);
          this.folderId = row.id;
          this.fileArr = [];
          this.loadData();
        } else {
          this.fileArr[index].checked = !this.fileArr[index].checked;
          this.$forceUpdate();
        }
      },
      goFolder(id, index) {
        if (!id) {
          this.filePath = [];
          this.folderId = '';
          this.loadData();
        } else {
          this.folderId = id;
          this.loadData();
          this.filePath.splice(index + 1, this.filePath.length - index + 1);
        }
      },
      async saveCircuit() {
        if (this.saveFlag === 'add') {
          await addCircuit(this.saveObject);
        } else if (this.saveFlag === 'edit') {
          await updateCircuit(this.saveObject)
        }
        this.drawerVisible = false
        this.loadData();
      },
      openAddNode() {
        this.actionNode = {}
        this.dialogVisible = true
        this.actionNode.saveFlag = 'add'
      },
      openEditNode(node) {
        this.actionNode = {...node}
        this.actionNode.saveFlag = 'edit'
        this.dialogVisible = true
      },
      deleteNode(node) {
        // 删除数据
        this.$confirm('确认删除此条数据?', '确认删除', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 确定之后删除
          this.saveObject.children = this.saveObject.children.filter(item => {
            return item.name !== node.name
          });
          if (node.id) {
            deleteNode(node).then(res => {
              console.log("后台删除成功")
            });
          }
          this.$forceUpdate();
        }).catch(() => {
          console.log('取消删除..');
        });
      },
      saveNode() {
        let tmpNode = {...this.actionNode}
        if (!this.saveObject.children) {
          this.saveObject.children = []
        }
        if (this.saveObject.id) {
          tmpNode.circuitId = this.saveObject.id
        }
        if (this.actionNode.saveFlag === 'edit') {
          this.saveObject.children.indexOf(tmpNode);
          let tmpIndex = this.saveObject.children.findIndex(item => {
            return item.id === tmpNode.id
          });
          this.saveObject.children.splice(tmpIndex, 1, tmpNode);
          if (this.actionNode.id) {
            updateNode(this.actionNode).then(res => {
              console.log('保存节点成功.');
              if (this.viewObjVisible) {
                this.handleViewClick({id: this.saveObject.id});
              }
            });
          }
        } else {
          tmpNode.orderNum = this.saveObject.children.length + 1
          this.saveObject.children.push(tmpNode)
        }
        this.dialogVisible = false;
      },
    }
  }
</script>

<style scoped>

  .main-div {
    padding: 20px 20px;
  }

  .file-class {
    height: 40px;
    width: 40px;
  }

  .content-div {
    width: 100%;
    height: 700px;
    border: #1f2d3d 1px solid;
    margin: 10px 0 0 0;
    padding: 10px 0 10px 20px;
    border-radius: 10px;
  }

  .file-path {
    margin: 10px 0 0 0;
    padding: 5px 0 5px 10px;
    display: flex;
    color: #3993ef;
    border: #3993ef 1px solid;
    border-radius: 5px;
  }

  .file-path > span {
    font-weight: bold;
  }

  .file-path > div {
  }

  .node-line {
    display: flex;
    height: 40px;
    margin: 5px 0;
    border-bottom: #1f2d3d 1px dashed;
  }

  .file-checkbox {
    height: 36px;
    width: 36px;
    margin: 0 10px 0 0;
  }

  .file-name {
    height: 40px;
    line-height: 42px;
    font-size: 20px;
    margin: 0 10px;
  }

  .drawer-content {
    padding: 10px 20px;
  }

  .draw-footer {
    width: 100%;
    text-align: right;
    position: fixed;
    bottom: 10px;
    right: 0;
    padding: 10px;
  }

  .img-btn {
    height: 32px;
    width: 32px;
    margin: 5px 5px;
  }
</style>
